<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {editAdmin} from "../../api/user.js"
onMounted(() => {
  adminInfo()
})
const adminInfo = async () => {
  state.userInfo = JSON.parse(localStorage.getItem("token"))
}
const saveUser = async () => {
  const res=await editAdmin(state.userInfo)
  if(res.data.code==200){
    localStorage.setItem("token",JSON.stringify(state.userInfo))
  }
}

const state = reactive({
  //医生后端的数据做个映射
  userInfo: {
    id: null,
    username: "",
    createTime: "",
    email: "",
    password: "",
    role: "",
    phone: "",

  },
  disabled: true
})
console.log();



</script>
<template>
  <div class="main">
    <el-descriptions title="个人信息" :column="3" border>
      <template #extra>
        <el-button type="info" @click="state.disabled=false">编辑</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
      <el-descriptions-item
          label="用户名"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
      >
        <el-input class="no-border" v-model="state.userInfo.username" :disabled="state.disabled"/>
      </el-descriptions-item>

      <el-descriptions-item label="密码" label-align="right" align="center">
        <el-input class="no-border" v-model="state.userInfo.password" :disabled="state.disabled"/>
      </el-descriptions-item>

      <el-descriptions-item label="角色" label-align="right" align="center">
        <el-input class="no-border" v-model="state.userInfo.role" :disabled="state.disabled"/>
      </el-descriptions-item>

      <el-descriptions-item label="手机" label-align="right" align="center">
        <el-input class="no-border" v-model="state.userInfo.phone" :disabled="state.disabled"/>
      </el-descriptions-item>

      <el-descriptions-item label="邮箱" label-align="right" align="center">
        <el-input class="no-border" v-model="state.userInfo.email" :disabled="state.disabled" />
      </el-descriptions-item>

    </el-descriptions>

  </div>

</template>

<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}

.my-content {
  background: var(--el-color-danger-light-9);
}


.main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;

}

.main input {
  border: none !important;
}
</style>
